<template>
  <div :class="className" :style="{ height: height, width: width }" ref="Dom" />
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { ref, reactive, watch, onMounted, nextTick, onUnmounted } from 'vue'
import { debounce } from '@/utils/index.ts'
const Dom = ref(null)
const props = defineProps({
  className: {
    type: String,
    default: 'chart'
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '350px'
  },
  /* autoResize: {
    type: Boolean,
    default: true
  }, */
  chartData: {
    type: Object,
    required: true
  }
})
const className = props.className
const width = props.width
const height = props.height
/* const autoResize = props.autoResize */
const chartData = props.chartData
watch(() => chartData, (val) => {
  setOptions(val)
}, {
  deep: true,
})
let resizeHandler = null
onMounted(() => {
  nextTick(() => {
    initChart()

    resizeHandler = debounce(() => {
      if (chart && chart.obj) {
        chart.obj.resize()
      }   
    }, 100)
    window.addEventListener('resize', resizeHandler)
  })
})
onUnmounted(() => {
  if (!chart.obj) {
    return
  }
  window.removeEventListener('resize', resizeHandler)
  chart.obj.dispose()
  chart.obj = null
})
const chart = reactive({
  obj: null
})
const initChart = () => {
  chart.obj = echarts.init(Dom.value, 'macarons')
  setOptions(chartData)
}
const setOptions = ({ expectedData, actualData } = {}) => {
  chart.obj.setOption({
    xAxis: {
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      boundaryGap: false,
      axisTick: {
        show: false
      }
    },
    grid: {
      left: 10,
      right: 10,
      bottom: 20,
      top: 30,
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      },
      padding: [5, 10]
    },
    yAxis: {
      axisTick: {
        show: false
      }
    },
    legend: {
      data: ['expected', 'actual']
    },
    series: [{
      name: 'expected', itemStyle: {
        normal: {
          color: '#FF005A',
          lineStyle: {
            color: '#FF005A',
            width: 2
          }
        }
      },
      smooth: true,
      type: 'line',
      data: expectedData,
      animationDuration: 2800,
      animationEasing: 'cubicInOut'
    },
    {
      name: 'actual',
      smooth: true,
      type: 'line',
      itemStyle: {
        normal: {
          color: '#3888fa',
          lineStyle: {
            color: '#3888fa',
            width: 2
          },
          areaStyle: {
            color: '#f3f8ff'
          }
        }
      },
      data: actualData,
      animationDuration: 2800,
      animationEasing: 'quadraticOut'
    }]
  })
}
</script>
